<template>
  <div>
    <ul class="Ord-list">
      <li v-for="item in list" :key="item.id">
        <span>
          <input type="checkbox" :checked="valbox"/>
        </span>
        <span>{{item.num}}</span>
        <span>{{item.nickname}}</span>
        <span>{{item.phone}}</span>
        <span>{{item.name}}</span>
        <span>{{item.course}}</span>
        <span>{{item.amount}}</span>
        <span>{{item.status}}</span>
        <span>{{item.time}}</span>
        <span>
          <router-link :to="'/place/'+item.id" class="rot">{{item.operation[0]}}</router-link>
          <p>
            <el-button
              style="padding:0;color:#9137f3;font-size:12px;"
              type="text"
              @click="dialogVisible = true"
            >{{item.operation[1]}}</el-button>
          </p>
          <p style="float:left; margin-top:10px;">
            <el-button
              style="padding:0;color:#9137f3;font-size:12px;font-weight:400;"
              type="text"
              @click="open"
            >{{item.operation[2]}}</el-button>
          </p>
        </span>
      </li>
    </ul>
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
      <span>取消订单</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  props: ["aaa"],
  computed: {
    valbox: function () {
      return this.aaa;
    },
  },
  data() {
    return {
      dialogVisible: false,
      list: [
        {
          id: 1,
          choice: "",
          num: "2019030102369669",
          nickname: "Cassy",
          phone: "18541263699",
          name: "幼儿英语入门课程",
          course: "201920236",
          amount: "2399.00",
          status: "待付款",
          time: "2019-01-25 10:55",
          operation: ["查看订单", "取消订单"],
        },
        {
          id: 2,
          choice: "",
          num: "2019030102369669",
          nickname: "Cassy",
          phone: "18541263699",
          name: "幼儿英语入门课程",
          course: "201920236",
          amount: "2399.00",
          status: "学习中",
          time: "2019-01-25 10:55",
          operation: ["查看订单", "取消订单", "结束课程"],
        },
        {
          id: 3,
          choice: "",
          num: "2019030102369669",
          nickname: "Cassy",
          phone: "18541263699",
          name: "幼儿英语入门课程",
          course: "201920236",
          amount: "2399.00",
          status: "已完成",
          time: "2019-01-25 10:55",
          operation: ["查看订单"],
        },
        {
          id: 4,
          choice: "",
          num: "2019030102369669",
          nickname: "Cassy",
          phone: "18541263699",
          name: "幼儿英语入门课程",
          course: "201920236",
          amount: "2399.00",
          status: "已关闭",
          time: "2019-01-25 10:55",
          operation: ["查看订单", "删除订单"],
        },
        {
          id: 5,
          choice: "",
          num: "2019030102369669",
          nickname: "Cassy",
          phone: "18541263699",
          name: "幼儿英语入门课程",
          course: "201920236",
          amount: "2399.00",
          status: "待付款",
          time: "2019-01-25 10:55",
          operation: ["查看订单", "删除订单"],
        },
        {
          id: 6,
          choice: "",
          num: "2019030102369669",
          nickname: "Cassy",
          phone: "18541263699",
          name: "幼儿英语入门课程",
          course: "201920236",
          amount: "2399.00",
          status: "待付款",
          time: "2019-01-25 10:55",
          operation: ["查看订单", "删除订单"],
        },
        {
          id: 7,
          choice: "",
          num: "2019030102369669",
          nickname: "Cassy",
          phone: "18541263699",
          name: "幼儿英语入门课程",
          course: "201920236",
          amount: "2399.00",
          status: "待付款",
          time: "2019-01-25 10:55",
          operation: ["查看订单", "删除订单"],
        },
        {
          id: 8,
          choice: "",
          num: "2019030102369669",
          nickname: "Cassy",
          phone: "18541263699",
          name: "幼儿英语入门课程",
          course: "201920236",
          amount: "2399.00",
          status: "待付款",
          time: "2019-01-25 10:55",
          operation: ["查看订单", "删除订单"],
        },
        {
          id: 9,
          choice: "",
          num: "2019030102369669",
          nickname: "Cassy",
          phone: "18541263699",
          name: "幼儿英语入门课程",
          course: "201920236",
          amount: "2399.00",
          status: "待付款",
          time: "2019-01-25 10:55",
          operation: ["查看订单", "删除订单"],
        },
        {
          id: 10,
          choice: "",
          num: "2019030102369669",
          nickname: "Cassy",
          phone: "18541263699",
          name: "幼儿英语入门课程",
          course: "201920236",
          amount: "2399.00",
          status: "待付款",
          time: "2019-01-25 10:55",
          operation: ["查看订单", "删除订单"],
        },
      ],
    };
  },
  methods: {
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    open() {
      this.$confirm("", "完成订单", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$message({
          type: "success",
          message: "结束成功!",
        });
      });
    },
  },
};
</script>
<style scoped>
.Ord-list {
  border-width: 0px;
  position: relative;
  left: 0px;
  top: 0px;
  font-family: "思源黑体";
  font-weight: 400;
  font-style: normal;
  font-size: 12px;
}
.Ord-list li {
  display: block;
  position: relative;
  left: 0px;
  top: 0px;
  width: 1000px;
  height: 90px;
  background: inherit;
  background-color: rgba(255, 255, 255, 1);
  box-sizing: border-box;
  border-width: 1px;
  border-style: solid;
  border-color: rgb(173 162 162);
  border-left: 0px;
  border-top: 0px;
  border-right: 0px;
  border-radius: 0px;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 0px;
}
.Ord-list li span {
  position: relative;
  font-size: 12px;
  top: 30px;
  display: block;
  float: left;
  text-align: center;
  width: 100px;
  height: 90px;
  box-shadow: none;
}
.Ord-list li span:nth-child(1) {
  width: 80px;
}
.Ord-list li span:nth-child(2) {
  width: 115px;
}
.Ord-list li span:nth-child(3) {
  width: 85px;
}
.Ord-list li span:nth-child(8) {
  width: 80px;
}
.Ord-list li span:nth-child(10) {
  width: 140px;
  color: #9137f3;
}
.rot {
  float: left;
  color: #9137f3;
  text-decoration: none;
}
</style>